<!--
 * @Author      : ZhouQiJun
 * @Date        : 2025-07-24 20:56:08
 * @LastEditors : ZhouQiJun
 * @LastEditTime: 2025-08-10 21:29:22
 * @Description : 关于博主，前端程序员，最近专注于 webGIS 开发
 * @加微信         : MasonChou123，进技术交流群
-->
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from 'vue'

import { type GisRef, setupMap } from '#ol-vue-hooks'

import { guiYang3857 } from './testData'

const mapContainer = ref()
let gis: GisRef | null = null
onMounted(() => {
  gis = setupMap(
    mapContainer.value,
    {
      center: guiYang3857 as [number, number],
      //地图初始显示级别
      zoom: 10,
      projection: 'EPSG:3857',
      // minZoom: 1,
      // maxZoom: 20,
    },
    'TheSetupMapEmpty',
  )
})

onBeforeUnmount(() => {
  gis!.dispose()
})
</script>

<template>
  <div>
    <div class="TheSetupMapEmpty" ref="mapContainer"></div>
    <div class="desc">setupMap 手动初始化。 没有设置图层时，显示 ol-vue-hooks 的 logo</div>
  </div>
</template>

<style lang="scss">
.desc,
.TheSetupMapEmpty {
  width: 400px;
  height: 400px;
}
</style>
